<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Loading</title>
        <link rel="stylesheet" type="text/css" href="loading.css">
        <style>
            .loader {
                position: relative;
                width: 5rem;
                height: 5rem;
            }

            .loader.small {
                -webkit-transform: scale(.5);
                transform: scale(.5);
            }

            .loader.circle-line,
            .loader.circle-round {
                height: 5rem;
            }

            /*circle-line*/

            .loader.circle-line span {
                position: absolute;
                display: inline-block;
                width: 1.5rem;
                height: .5rem;
                border-top-left-radius: .25rem;
                border-bottom-left-radius: .25rem;
                background: #1ABC9C;
                opacity: .05;
                -webkit-animation: circle-line 1s ease infinite;
                animation: circle-line 1s ease infinite;
            }

            .loader.circle-line span:nth-child(1) {
                top: 50%;
                left: 0;
                margin-top: -.25rem;
                -webkit-animation-delay: .13s;
                animation-delay: .13s;
            }

            .loader.circle-line span:nth-child(2) {
                top: 1rem;
                left: .5rem;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-animation-delay: .26s;
                animation-delay: .26s;
            }

            .loader.circle-line span:nth-child(3) {
                left: 50%;
                top: .5rem;
                margin-left: -.75rem;
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
                -webkit-animation-delay: .39s;
                animation-delay: .39s;
            }

            .loader.circle-line span:nth-child(4) {
                right: .5rem;
                top: 1rem;
                -webkit-transform: rotate(145deg);
                transform: rotate(145deg);
                -webkit-animation-delay: .52s;
                animation-delay: .52s;
            }

            .loader.circle-line span:nth-child(5) {
                left: 3.5rem;
                top: 50%;
                margin-top: -.25rem;
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
                -webkit-animation-delay: .65s;
                animation-delay: .65s;
            }

            .loader.circle-line span:nth-child(6) {
                bottom: 1rem;
                right: .5rem;
                -webkit-transform: rotate(-145deg);
                transform: rotate(-145deg);
                -webkit-animation-delay: .78s;
                animation-delay: .78s;
            }

            .loader.circle-line span:nth-child(7) {
                left: 50%;
                bottom: .5rem;
                margin-left: -15px;
                -webkit-transform: rotate(-90deg);
                transform: rotate(-90deg);
                -webkit-animation-delay: .91s;
                animation-delay: .91s;
            }

            .loader.circle-line span:nth-child(8) {
                bottom: 1rem;
                left: .5rem;
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-animation-delay: 1.04s;
                animation-delay: 1.04s;
            }

            @keyframes circle-line {
                0% {
                    opacity: .05;
                }
                100% {
                    opacity: .7;
                }
            }

            @-webkit-keyframes circle-line {
                0% {
                    opacity: .05;
                }
                100% {
                    opacity: .7;
                }
            }

            /*circle-line-spin*/

            .loader.circle-line-spin .circle-line-inner {
                width: 100%;
                height: 100%;
                -webkit-animation: circle-line-spin 1.5s linear infinite;
                animation: circle-line-spin 1.5s linear infinite;
            }

            .loader.circle-line-spin span {
                position: absolute;
                display: inline-block;
                width: 1.5rem;
                height: .5rem;
                border-top-left-radius: .25rem;
                border-bottom-left-radius: .25rem;
                background: #1ABC9C;
                opacity: .7;
            }

            .loader.circle-line-spin span:nth-child(1) {
                top: 50%;
                left: 0;
                margin-top: -.25rem;
            }

            .loader.circle-line-spin span:nth-child(2) {
                top: 1rem;
                left: .5rem;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            .loader.circle-line-spin span:nth-child(3) {
                left: 50%;
                top: .5rem;
                margin-left: -.75rem;
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
            }

            .loader.circle-line-spin span:nth-child(4) {
                right: .5rem;
                top: 1rem;
                -webkit-transform: rotate(145deg);
                transform: rotate(145deg);
            }

            .loader.circle-line-spin span:nth-child(5) {
                left: 3.5rem;
                top: 50%;
                margin-top: -.25rem;
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .loader.circle-line-spin span:nth-child(6) {
                bottom: 1rem;
                right: .5rem;
                -webkit-transform: rotate(-145deg);
                transform: rotate(-145deg);
            }

            .loader.circle-line-spin span:nth-child(7) {
                left: 50%;
                bottom: .5rem;
                margin-left: -15px;
                -webkit-transform: rotate(-90deg);
                transform: rotate(-90deg);
            }

            .loader.circle-line-spin span:nth-child(8) {
                bottom: 1rem;
                left: .5rem;
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

            @keyframes circle-line-spin {
                0% {
                    transform: rotate(0);
                }
                100% {
                    transform: rotate(360deg);
                }
            }

            @-webkit-keyframes circle-line-spin {
                0% {
                    -webkit-transform: rotate(0);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                }
            }

            /*circle-round*/

            .loader.circle-round span {
                opacity: .05;
                -webkit-animation: circle-round 1s ease infinite;
                animation: circle-round 1s ease infinite;
            }

            .loader.circle-round-fade span {
                -webkit-animation: circle-round-fade 1s ease infinite;
                animation: circle-round-fade 1s ease infinite;
            }

            .loader.circle-round span,
            .loader.circle-round-fade span {
                position: absolute;
                width: .8rem;
                height: .8rem;
                display: inline-block;
                border-radius: 50%;
                background: #1ABC9C;
            }

            .loader.circle-round span:nth-child(1),
            .loader.circle-round-fade span:nth-child(1) {
                top: 50%;
                left: 0;
                margin-top: -.4rem;
                -webkit-animation-delay: -1.04s;
                animation-delay: -1.04s;
            }

            .loader.circle-round span:nth-child(2),
            .loader.circle-round-fade span:nth-child(2) {
                top: .7rem;
                left: .7rem;
                -webkit-animation-delay: -.91s;
                animation-delay: -.91s;
            }

            .loader.circle-round span:nth-child(3),
            .loader.circle-round-fade span:nth-child(3) {
                top: 0;
                left: 50%;
                margin-left: -.4rem;
                -webkit-animation-delay: -.78s;
                animation-delay: -.78s;
            }

            .loader.circle-round span:nth-child(4),
            .loader.circle-round-fade span:nth-child(4) {
                right: .7rem;
                top: .7rem;
                -webkit-animation-delay: -.65s;
                animation-delay: -.65s;
            }

            .loader.circle-round span:nth-child(5),
            .loader.circle-round-fade span:nth-child(5) {
                right: 0;
                top: 50%;
                margin-top: -.4rem;
                -webkit-animation-delay: -.52s;
                animation-delay: -.52s;
            }

            .loader.circle-round span:nth-child(6),
            .loader.circle-round-fade span:nth-child(6) {
                bottom: .7rem;
                right: .7rem;
                -webkit-animation-delay: -.39s;
                animation-delay: -.39s;
            }

            .loader.circle-round span:nth-child(7),
            .loader.circle-round-fade span:nth-child(7) {
                bottom: 0;
                left: 50%;
                margin-left: -.4rem;
                -webkit-animation-delay: -.26s;
                animation-delay: -.26s;
            }

            .loader.circle-round span:nth-child(8),
            .loader.circle-round-fade span:nth-child(8) {
                left: .7rem;
                bottom: .7rem;
                -webkit-animation-delay: -.13s;
                animation-delay: -.13s;
            }

            @keyframes circle-round {
                0% {
                    opacity: .05;
                }
                100% {
                    opacity: .7;
                }
            }

            @-webkit-keyframes circle-round {
                0% {
                    opacity: .05;
                }
                100% {
                    opacity: .7;
                }
            }

            @keyframes circle-round-fade {
                0% {
                    opacity: .25;
                    transform: scale(.2);
                }
                100% {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            @-webkit-keyframes circle-round-fade {
                0% {
                    opacity: .25;
                    transform: scale(.2);
                }
                100% {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            /*line-square*/

            .loader.line-square {
                width: 6rem;
                height: .8rem;
            }

            .loader.line-square span {
                position: absolute;
                top: 0;
                width: .8rem;
                height: .8rem;
                display: inline-block;
                background: #1ABC9C;
                -webkit-animation: line-square 1s ease infinite;
                animation: line-square 1s ease infinite;
            }

            .loader.line-square span:nth-child(1) {
                left: 0;
                -webkit-animation-delay: .13s;
                animation-delay: .13s;
            }

            .loader.line-square span:nth-child(2) {
                left: 1.3rem;
                -webkit-animation-delay: .26s;
                animation-delay: .26s;
            }

            .loader.line-square span:nth-child(3) {
                left: 2.6rem;
                -webkit-animation-delay: .39s;
                animation-delay: .39s;
            }

            .loader.line-square span:nth-child(4) {
                left: 3.9rem;
                -webkit-animation-delay: .52s;
                animation-delay: .52s;
            }

            .loader.line-square span:nth-child(5) {
                left: 5.2rem;
                -webkit-animation-delay: .65s;
                animation-delay: .65s;
            }

            @keyframes line-square {
                0% {
                    opacity: 1;
                    transform: scale(1.2);
                    -webkit-transform: scale(1.2);
                }
                100% {
                    opacity: .2;
                    transform: scale(.2);
                    -webkit-transform: scale(.2);
                }
            }

            @-webkit-keyframes line-square {
                0% {
                    opacity: 1;
                    transform: scale(1.2);
                    -webkit-transform: scale(1.2);
                }
                100% {
                    opacity: .2;
                    transform: scale(.2);
                    -webkit-transform: scale(.2);
                }
            }

            /*line-round*/

            .loader.line-round {
                width: 6rem;
                height: .8rem;
            }

            .loader.line-round span {
                position: absolute;
                top: 0;
                width: .8rem;
                height: .8rem;
                border-radius: 50%;
                display: inline-block;
                background: #1ABC9C;
                -webkit-animation: line-round 1s ease infinite;
                animation: line-round 1s ease infinite;
            }

            .loader.line-round span:nth-child(1) {
                left: 0;
                -webkit-animation-delay: .13s;
                animation-delay: .13s;
            }

            .loader.line-round span:nth-child(2) {
                left: 1.3rem;
                -webkit-animation-delay: .26s;
                animation-delay: .26s;
            }

            .loader.line-round span:nth-child(3) {
                left: 2.6rem;
                -webkit-animation-delay: .39s;
                animation-delay: .39s;
            }

            .loader.line-round span:nth-child(4) {
                left: 3.9rem;
                -webkit-animation-delay: .52s;
                animation-delay: .52s;
            }

            .loader.line-round span:nth-child(5) {
                left: 5.2rem;
                -webkit-animation-delay: .65s;
                animation-delay: .65s;
            }

            @keyframes line-round {
                0% {
                    opacity: 1;
                    transform: scale(1.2);
                    -webkit-transform: scale(1.2);
                }
                100% {
                    opacity: .2;
                    transform: scale(.2);
                    -webkit-transform: scale(.2);
                }
            }

            @-webkit-keyframes line-round {
                0% {
                    opacity: 1;
                    transform: scale(1.2);
                    -webkit-transform: scale(1.2);
                }
                100% {
                    opacity: .2;
                    transform: scale(.2);
                    -webkit-transform: scale(.2);
                }
            }

            /*line-bounce*/

            .loader.line-bounce {
                width: 6rem;
                height: 2.5rem;
            }

            .loader.line-bounce span {
                position: absolute;
                top: 0;
                width: .5rem;
                height: 2.5rem;
                border-radius:5px;
                display: inline-block;
                background: #1ABC9C;
                -webkit-animation: line-bounce 1s ease infinite;
                animation: line-bounce 1s ease infinite;
            }

            .loader.line-bounce span:nth-child(1) {
                left: 0;
                -webkit-animation-delay: -.65s;
                animation-delay: -.65s;
            }

            .loader.line-bounce span:nth-child(2) {
                left: 1.3rem;
                -webkit-animation-delay: -.78s;
                animation-delay: -.78s;
            }

            .loader.line-bounce span:nth-child(3) {
                left: 2.6rem;
                -webkit-animation-delay: -.91s;
                animation-delay: -.91s;
            }

            .loader.line-bounce span:nth-child(4) {
                left: 3.9rem;
                -webkit-animation-delay: -.78s;
                animation-delay: -78s;
            }

            .loader.line-bounce span:nth-child(5) {
                left: 5.2rem;
                -webkit-animation-delay: -.65s;
                animation-delay: -.65s;
            }

            @keyframes line-bounce {
                0% {
                    transform: scaleY(1);
                }
                50% {
                    transform: scaleY(.3);
                }
                100% {
                    transform: scaleY(1);
                }
            }

            @-webkit-keyframes line-bounce {
                0% {
                    -webkit-transform: scaleY(1);
                }
                50% {
                    -webkit-transform: scaleY(.3);
                }
                100% {
                    -webkit-transform: scaleY(1);
                }
            }

            /*circle-spin*/

            .loader.circle-spin {
                border-radius: 50%;
                border: .2rem solid rgba(0, 0, 0, .05);
                width: 4rem;
                height: 4rem;
                box-sizing: content-box;
            }

            .loader.circle-spin .loader-placeholder {
                position: absolute;
                top: -.2rem;
                left: -.2rem;
                border-radius: 50%;
                border: .2rem solid transparent;
                border-top: .2rem solid #1ABC9C;
                width: 4rem;
                height: 4rem;
                box-sizing: content-box;
                -webkit-animation: circle-spin 1s ease infinite;
                animation: circle-spin 1s ease infinite;
            }

            @keyframes circle-spin {
                0% {
                    transform: rotate(0);
                }
                100% {
                    transform: rotate(360deg);
                }
            }

            @-webkit-keyframes circle-spin {
                0% {
                    -webkit-transform: rotate(0);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                }
            }

            .loader {
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="loading">
            <div class="loader circle-line small">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="loader circle-line-spin small">
                <div class="circle-line-inner">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="loader circle-round small">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="loader circle-round-fade small">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="loader line-square small">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="loader line-round small">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="loader line-bounce small">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="loader circle-spin small">
                <div class="loader-placeholder"></div>
            </div>
        </div>

    </body>

</html>